<template>
  <!-- 外层调用组件时需要给到宽高 -->
  <view class="anim-wrapper">
    <view class="scale-view" :style="{ transform: `scale(${scale})` }">
      <slot></slot>
    </view>
  </view>
</template>

<script>
// TODO: 设计稿宽度/高度，pc和移动端分别处理
let designBase = 1920
let isBaseWidth = true
// #ifdef PC-H5
// const designBase = 1920

// const isBaseWidth = true
// #endif
// #ifndef PC-H5
designBase = 750

isBaseWidth = true
// #endif

export default {
  data () {
    return {
      // #ifdef MP-WEIXIN
      scale: uni.upx2px(750) / 750,
      // #endif
      // #ifndef MP-WEIXIN
      // eslint-disable-next-line
      scale: this.computeData() / designBase
      // #endif
    }
  },
  mounted () {
    // #ifndef MP-WEIXIN
    window.addEventListener('resize', () => {
      this.scale = this.computeData() / designBase
    })
    // #endif
  },
  methods: {
    computeData (minValue = 0, maxValue = Infinity) {
      const htmlDom = document.documentElement

      const width = htmlDom.offsetWidth || window.innerWidth || htmlDom.clientWidth || document.body.clientWidth || window.screen.width
      const height = htmlDom.offsetHeight || window.innerHeight || htmlDom.clientHeight || document.body.clientHeight || window.screen.height

      let current = isBaseWidth ? width : height

      current = Math.max(current, minValue)
      current = Math.min(current, maxValue)
      return current
    }
  }
}
</script>

<style lang="less" scoped>
.anim-wrapper {
  .scale-view {
    transform-origin: 0% 0%;
  }
}
</style>
